<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        先平移后旋转
    </title>
</head>

<body onload="main()">
<canvas id="example" width="400" height="400" style="border: 1px solid red;"> canves</canvas>
<script src="../js/cuon-utils.js"></script>
<script src="../js/webgl-debug.js"></script>
<script src="../js/webgl-utils.js"></script>
<script src="../js/cuon-matrix.js"></script>
<script>

    /**
     *  x' = x cos b - y sin b
     *  y' = x sin b + y cos b
     *  z' = z
     *
     * @type {string}
     */

        // 顶点着色器
    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +
        ' uniform mat4 u_xformMatrix;\n' +
        ' void main() {\n' +
        ' gl_Position = u_xformMatrix * a_Position;' +
        // ' gl_Position =  a_Position;' +
        '}\n';

    var ANGLE = 18; // 旋转度数

    // 片元着色器
    var FSHADER_SOURCE =
        'precision mediump float;' +
        'void main() {\n' +
        ' gl_FragColor = vec4(1.0,1.0,0.0,1.0);\n' + // 设置颜色
        '}\n';

    function main() {

        var canves = document.getElementById("example");

        var gl = getWebGLContext(canves);

        // 初始化着色器
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.error("着色器加载错误")
            return;
        }

        // 设置顶点位置
        var n = initVertexBuffers(gl);

        if (n < 0) {
            console.error("error")
            return;
        }
        let matrix4 = new Matrix4();

        // setRotate 参数1 旋转角度 参数2 绕x轴旋转 参数3 绕y轴旋转 参数3 绕z轴旋转
        // 旋转矩阵
        let xformMatrix = matrix4.setRotate(ANGLE, 0, 0, 1)
        matrix4.translate(0.5,0.0,1.0)
        // 平移矩阵
        // let xformMatrix = matrix4.setTranslate(0.5, 0.0, 1)
        // matrix4.rotate(ANGLE, 0, 0, 1)
        // 缩放矩阵
        // let xformMatrix = matrix4.setScale( 2, 2, 1)

        var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');

        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);

        gl.clearColor(0.0, 1.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 以第一个点为中心绘制三角形（123,234,345,456, ...）
        // gl.drawArrays(gl.TRIANGLE_FAN, 0, n);
        // 每次已当前最后三个顶点绘制三角形（123,134,145, ...）
        // gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
        // 已不重复的三个点绘制三角形 （1-3,4-6, ...）
        gl.drawArrays(gl.TRIANGLES, 0, n);
    }

    function initVertexBuffers(gl) {
        var vertices = new Float32Array([
            0.0, 0.0,
            0.0, 0.5,
            0.5, 0.5,
        ]);

        // 点的个数
        var n = vertices.length / 2;

        // 创建缓冲区对象
        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {
            console.error("缓冲区对象创建错误")
            return;
        }

        // 将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

        // 将缓冲区对象分配给 a_Position
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        // 链接 a_Position 变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        return n;
    }


</script>
</body>

</html>